<template>
  <div>
    <el-dialog
      v-model="data.projectDialog"
      width="60%"
      top="10vh"
      title="中咨合同列表"
      @close="closeDialog"
    >
      <div class="table">
        <el-input
          v-model="params.keyWord"
          placeholder="关键字搜索"
          style="width: 200px; margin-right: 15px"
        />
        <el-button class="ordinary" @click="search()">搜索</el-button>
        <Table
          :hasOperate="true"
          :loading="data.isLoading"
          :table-arr="data.allTableData"
          :columns="data.columns"
          @selectList="getCurrentList"
          @rowClick="getCurrentRow"
        >
          <template #status>
            <el-table-column label="合同类型" width="80">
              <template #default="{ row }">
                <span v-if="row.contract_type == 1">通用类</span>
                <span v-if="row.contract_type == 2">建设工程类</span>
              </template>
            </el-table-column>
          </template>
        </Table>
        <div class="example-pagination-block">
          <el-pagination
            background
            v-model:current-page="params.pageNo"
            v-model:page-size="params.pageSize"
            layout="prev, pager, next ,total,sizes,jumper"
            :total="data.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.projectDialog = false">关闭</el-button>
          <el-button type="primary" @click="handleContract()">确认</el-button>
        </span>
      </template> -->
    </el-dialog>
  </div>
</template>

<script lang="ts">
// import Table from '../../../components/table2/table.vue'
import { getZhongziApi } from '@/views/project/api/commom'
// import { getZhongziContract } from '@/views/project/api/contract'
import Table from '@/views/project/components/table-dialog/table.vue'
import tableData from './tableContract.json'
import JSEncrypt from '@/utils/jsencrypt'
import { ZZ_PUBLIC_KEY, ZZ_PRIVATE_KEY } from '@/constants'
import { defineComponent, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { encryption, decrypt } from '@/utils/encryption'
import { useStore } from 'vuex'

export default defineComponent({
  components: {
    Table,
  },
  props: {
    projectCode: {
      type: String,
    },
  },
  emits: {
    closeDialog: null,
    getContract: null,
  },
  setup(props, { emit }) {
    const data = reactive({
      projectDialog: true,
      allTableData: [],
      isLoading: false,
      columns: tableData.platformTableHeader,
      currentList: [],
      ids: [],
      total: 1000,
    })
    const store = useStore()
    let ZhongziConfig = reactive(store.state.projectCenter.ZhongziConfig)
    const params = reactive({
      appcode: ZhongziConfig.appcode,
      username: ZhongziConfig.username,
      password: ZhongziConfig.password,
      pkdept: ZhongziConfig.pkdept,
      pageNo: 1,
      pageSize: 20,
      keyWord: '',
      primaryKey: '',
      projectCodes: props.projectCode,
      pk_contract_main: '',
    })
    const getCurrentList = (currentList) => {
      console.log(currentList, 'getCurrentList')
      data.currentList = currentList
      data.ids = currentList.map((item) => {
        return item.id
      })
    }
    const getCurrentRow = (row) => {
      data.isLoading = true
      params.pk_contract_main = row.pk_contract_main
      getZhongziApi({
        path: '/itf/common/externalinterface/getContractById.json',
        cipherText: encryption(params),
      }).then((res) => {
        data.isLoading = false
        emit('getContract', res.data.data[0])
      })
    }
    const onSearch = async () => {
      data.isLoading = true
      getZhongziApi({
        path: '/itf/common/externalinterface/getContractCatalogue.json',
        cipherText: encryption(params),
      })
        .then((res) => {
          data.isLoading = false
          data.allTableData = res.data.data
          data.total = res.data.total
          console.log(data.allTableData, 'data.allTableData')
        })
        .catch((err) => {
          console.log(err, 'err')
          data.isLoading = false
          data.allTableData = []
        })
    }
    onSearch()
    const search = () => {
      params.pageNo = 1
      onSearch()
    }
    const handleCurrentChange = (e) => {
      console.log(e, 'handleCurrentChange')
      params.pageNo = e
      onSearch()
    }
    //改变页数限制
    const handleSizeChange = (e) => {
      console.log(e, 'handleSizeChange')
      params.pageSize = e
      onSearch()
    }
    const closeDialog = () => {
      console.log('closeDialog')
      emit('closeDialog', false)
    }
    const handleContract = () => {
      if (data.currentList.length == 1) {
        emit('getContract', data.currentList[0])
      } else {
        ElMessage({
          message: '请选择一个合同',
          type: 'warning',
        })
      }
    }
    return {
      data,
      params,
      search,
      closeDialog,
      getCurrentList,
      getCurrentRow,
      handleCurrentChange,
      handleSizeChange,
      handleContract,
    }
  },
})
</script>

<style scoped>
.el-table {
  height: 250px;
}
.error {
  color: brown;
}
</style>
